<!--VIP等级和日历奖励-->
<template>
	<view class="hdtybox" :class="hdc">
		<topboxVue :tit="$t('hd.bt13')"></topboxVue>
		<view class="v1box">
			<image src="/static/hd/v1b.png" class="w100 mb20" mode="widthFix"></image>
			<view class="v1box-txtbox">
				<view class="tc f28 fwb mb30">
					{{$t('v1.tit1')}}
				</view>
				<view class="f22 mb20 c9c" v-html="$t('v1.t1.txt1')"></view>
				<view class="v1box-txtbox-fxb bj_center f26" @click="tokf">
					<text>➡️ Telegram:</text>
					<text class="cy">{{getkf()}}</text>
				</view>
			</view>
			<view class="v1box-txtbox">
				<view class="tc f28 fwb mb30">
					{{$t('v1.tit2')}}
				</view>
				<view class="f22 mb30 c9c" v-html="$t('v1.t2.txt1')"></view>
				<view class="tc mb20">
					<image src="/static/hd/vt1.png" class="v1box-txtbox-vt1" mode="widthFix"></image>
				</view>
				<view class="f22 c9c" v-html="$t('v1.t2.txt2')"></view>
			</view>
			<view class="v1box-txtbox">
				<view class="tc f28 fwb mb30">
					{{$t('v1.tit3')}}
				</view>
				<view class="f22 mb20 c9c" v-html="$t('v1.t3.txt1')"></view>
				<view class="bj_center mb20">
					<image src="/static/hd/j1.png" class="v1box-txtbox-ico"></image>
					<text class="f28 fwb">{{$t('v1.st1')}}</text>
				</view>
				<view class="f22 mb20 c9c" v-html="$t('v1.t3.txt2')"></view>
				<view class="bj_center mb20">
					<image src="/static/hd/j2.png" class="v1box-txtbox-ico"></image>
					<text class="f28 fwb">{{$t('v1.st2')}}</text>
				</view>
				<view class="f22 mb20 c9c" v-html="$t('v1.t3.txt3')"></view>
				<view class="bj_center mb20">
					<image src="/static/hd/j3.png" class="v1box-txtbox-ico"></image>
					<text class="f28 fwb">{{$t('v1.st3')}}</text>
				</view>
				<view class="f22 mb20 c9c" v-html="$t('v1.t3.txt4')"></view>
				<view class="bj_center mb20">
					<image src="/static/hd/j4.png" class="v1box-txtbox-ico"></image>
					<text class="f28 fwb">{{$t('v1.st4')}}</text>
				</view>
				<view class="f22 mb20 c9c" v-html="$t('v1.t3.txt5')"></view>
			</view>
			<view class="v1box-txtbox">
				<view class="tc f28 fwb mb30">
					{{$t('v1.tit4')}}
				</view>
				<view class="f22 mb20 c9c" v-html="$t('v1.t4.txt1')"></view>
				<view class="clearfloat v1box-sibox">
					<view class="v1box-si" v-for="i in 8">
						<image :src="'/static/page5/v'+i+'.png'"></image>
						<view class="">
							{{$t('v1.v'+i)}}
						</view>
					</view>
				</view>
			</view>
			<view class="v1box-btn" @click="repage">
				{{$t('v1.btn')}}
			</view>
		</view>
		<bottomVue></bottomVue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("setshowindex");
	let hdc = ref("hdpagein")

	function repage() {
		hdc.value = "hdpageout";
		setTimeout(function() {
			clhd(0);
		}, 300)
	}

	function getkf() {
		return getApp().globalData.config2.kfurl
	}

	function tokf() {
		window.open(getApp().globalData.config2.kfurl)
	}
</script>

<style scoped lang="scss">
	.v1box {
		padding: 20rpx;

		&-btn {
			width: 710rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 36rpx;
			text-align: center;
			font-weight: bold;
			background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		&-sibox {
			width: 90%;
			margin: 0 auto;
		}

		&-si {
			width: 120rpx;
			font-size: 20rpx;
			text-align: center;
			float: left;
			margin-right: 30rpx;
			margin-bottom: 30rpx;

			image {
				width: 88rpx;
				height: 88rpx;
				margin-bottom: 10rpx;
			}
		}

		&-si:nth-child(4n+4) {
			margin-right: 0;
		}


		&-txtbox {
			background: #00561D;
			border-radius: 20rpx;
			padding: 38rpx 30rpx;
			margin-bottom: 20rpx;

			&-fxb {
				height: 80rpx;
				background: #001F0A;
				border-radius: 12rpx;
				border: 2rpx solid #004316;
			}

			&-vt1 {
				width: 634rpx;
			}

			&-ico {
				width: 72rpx;
				height: 72rpx;
			}
		}
	}
</style>